<template>
  <!--    spu参数配置-规格项配置信息-->
  <div class="spu-spec-config">
    <SpecItemOptValue
      :opt-value-list="optValueList"
      @del-opt-value="handleDelOptValue"
      @add-opt-value="handleAddOptValue"
    />

    <BizMetaAttrModal :if-required="false" @register="registerModal" @ok="handleChooseOptValueOk" />
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import { useModal } from '@/components/Modal';
  import { SpuSpecModel } from 'mc-c2b2m-operator-api/types/spu';
  import BizMetaAttrModal from '@/components/BizMetaAttrModal/Index.vue';
  import SpecItemOptValue from '@/views/spu/spu/setting/components/SpecItemOptValue.vue';

  const props = defineProps({
    // 规格项数据源
    specItem: {
      type: Object as PropType<SpuSpecModel>,
      default: () => {
        return {};
      },
    },
  });

  const emits = defineEmits(['chooseOk']);

  const [registerModal, { openModal, closeModal }] = useModal();

  // 值列表
  const optValueList = computed(() => {
    return props.specItem?.optValueList || [];
  });
  // 删除值（业务元属性）
  function handleDelOptValue(index: number) {
    optValueList.value.splice(index, 1);
  }
  // 添加值（业务元属性）
  function handleAddOptValue() {
    openModal(true, { ...props.specItem });
  }
  // 添加值成功
  function handleChooseOptValueOk(data: any) {
    emits('chooseOk', data);
    closeModal();
  }
</script>

<style scoped lang="less">
  .spu-spec-config {
    padding-top: 10px;
  }
</style>
